<template>
  <!-- navbar -->
  <div class="top_navbar">
    <TitleNavbar>
      <template v-slot:left>
        <svg class="xiangzuo_icon icon" aria-hidden="true" @click="handleBack">
          <use xlink:href="#icon-xiangzuo"></use>
        </svg>
      </template>
      <template v-slot:center>公开课</template>
      <template v-slot:right>
        <svg class="icon" aria-hidden="true" @click="handleShowFilter">
          <use xlink:href="#icon-shaixuan"></use>
        </svg>
      </template>
    </TitleNavbar>
  </div>
</template>

<script>
import TitleNavbar from "@/components/titleNavbar/index.vue";
import { useRouter } from "vue-router";
import { inject } from "@vue/runtime-core";
export default {
  components: { TitleNavbar },
  setup() {
    const router = useRouter();
    // 返回上一页
    const handleBack = () => {
      router.back();
    };
    // 筛选弹出框控制
    const showPopup = inject("showPopup");
    const handleShowFilter = () => {
      showPopup();
    };
    return { handleBack, handleShowFilter };
  },
};
</script>

<style lang="less" scoped>
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.xiangzuo_icon {
  width: 1.8rem;
  height: 1.8rem;
}
.top_navbar {
  height: 2.5rem;
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #fff;
  //   border-bottom: 1px solid red;
}
</style>
